<template>
  <div class="completedMarking">
    <pageContent>
      <template v-slot:box-content>
        <div style="margin: 12px 15px 8px 15px;" class="treeList">
          <div style="font-size:15px;margin-bottom:15px" class="flexBetween">
            <div style="font-size:18px;font-weight:bold;color: #202d40;">已完工标记</div>
          </div>
          <a-spin :spinning="treeLoading">
            <div class="leftDiv">
              <div style="width:100%;margin:0 auto">
                <a-select
                  v-if="defaultUnitFlag"
                  :default-value="defaultUnit"
                  style="width: 100%"
                  @change="selectUnitChange"
                >
                  <a-select-option
                    :value="item.id"
                    v-for="item in unitList"
                    :key="item.id"
                  >{{item.tenderCode}}</a-select-option>
                </a-select>
              </div>
              <div>
                <treeNoSearch
                  v-if="!treeLoading"
                  :treeData="unitTreeData"
                  :defaultSelectKeys="defaultSelectKeysNoselect"
                  @treeKey="treeKey"
                />
              </div>
            </div>
          </a-spin>
        </div>
      </template>
      <template v-slot:right-content style=" position:relative">
        <div class="flexBetweenCenter" style="margin-bottom:8px;">
          <div class="rightTitle">WBS</div>
        </div>
        <div class="selectDivBottom"></div>
        <div class="tableDiv">
          <vxeTableCom
            :tableData="tableData"
            :loading="loading"
            detailName="配置"
            tableTitle="已完成标记"
            @tableDetail="tableDetail"
            :expandFlag="true"
          ></vxeTableCom>
        </div>
        <div style="position:absolute;bottom:0;width:calc(100% - 540px);">
          <vxePage style="width:100%" :pageData="pageData" @pageChange="pageChange" />
        </div>
      </template>
    </pageContent>
    <!-- 详情 -->
    <div class="tableDrawer">
      <a-drawer
        :title="drawerTitle"
        placement="right"
        :visible="visibleDrawer"
        :maskClosable="false"
      
        :closable='drawerClosable'
        @close="onClose"
        :width="800"
      >
        <a-spin :spinning="detailLoading">
          <div class="content" style="width:100%;height:88vh">
            <markingDetail
              v-if="!detailLoading"
              ref="markingDetail"
              :wbsName="wbsName"
              :frontWbsId="wbsId"
              :orgId="orgId"
              :projectId="projectId"
              @onCancle="onCancle"
            />
            <div class="flexCenter" v-if="!detailLoading">
              <a-button style="margin-right:20px" @click="onCancle">取消</a-button>
              <a-button type="primary" @click="onSubmit">确定</a-button>
            </div>
          </div>
        </a-spin>
      </a-drawer>
    </div>
  </div>
</template>

<script>
import treeNoSearch from '@/components/tree/treeNoSearch'
import vxeTableCom from '@/components/vxeTable/index'
import vxePage from '@/components/vxePage/index'
import pageContent from '@/components/pageContent/index'
import { childWbsByWbsId, wbsTreeByWbsId, wbsTreeByOrgId, markFinish } from '@/api/completedMarking.js'
import { getManageByUserId } from '@/api/listDirectorySet.js'
import tableDrawer from '@/components/drawer/tableDrawer'
import markingDetail from './markingDetail/index'

import XEUtils from 'xe-utils'

const treeData = [
  {
    title: 'parent 1',
    disabled: true,
    key: '0-0',
    slots: {
      icon: 'smile'
    },
    scopedSlots: {
      title: 'title'
    },
    children: [
      {
        title: 'leaf1',
        key: '001001001001',
        scopedSlots: {
          title: 'title'
        },
        slots: { icon: 'smile' }
      },
      {
        title: 'leaf2',
        key: '001001002003003',
        scopedSlots: {
          title: 'title'
        },
        slots: { icon: 'smile' }
      }
    ]
  }
]
export default {
  name: 'completedMarking',
  data() {
    return {
      //不能打钩的
      defaultSelectKeysNoselect: [],
      //能打钩的
      defaultSelectKeys: ['1'],
      treeData,
      parentWbsId: '',
      pageData: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 20
      },
      tableData: [],
      loading: true,
      wbsId: '',
      configData: [],

      drawerTitle: '详情',
      wbsName: '',
      treeDetailData: [],
      treeDetailCheck: [],
      projectId: '',
      orgId: '',
      visibleDrawer: false,
      detailLoading: false,
      unitList: [],
      defaultUnit: [],
      unitTreeData: [],
      defaultUnitFlag: false,
      treeLoading: true,
      drawerClosable:true
    }
  },
  mounted() {
    this.getUnitList()
  },
  components: {
    treeNoSearch,
    vxeTableCom,
    pageContent,
    vxePage,
    tableDrawer,
    markingDetail
  },
  methods: {
    treeKey(val) {
      this.parentWbsId = val
      // console.log(this.parentWbsId);
      this.getChildList()
    },
    pageChange(currentPage, pageSize) {
      this.pageData.currentPage = currentPage
      this.pageData.pageSize = pageSize
      this.getChildList()
    },
    //获取表格
    getChildList() {
      this.loading = true
      this.visibleDrawer = false
      let data = {
        parentWbsId: this.parentWbsId,
        page: this.pageData.currentPage,
        size: this.pageData.pageSize
      }
      childWbsByWbsId(data).then((res) => {
        // console.log(res.data);

        this.tableData = res.data
        this.tableData.forEach((item) => {
          if (item.totalCount == 0) {
            item.rate = 0 + '%'
          } else {
            item.rate = parseFloat((item.markFinishCount / item.totalCount) * 100).toFixed(2) + '%'
          }
        })
        this.loading = false
        this.pageData.totalResult = res.total
      })
    },
    //表格配置
    getConfigData() {
      let data = {
        wbsId: this.wbsId
      }
      wbsTreeByWbsId(data).then((res) => {
        // console.log(res);
        this.treeDetailData = res.data

        this.treeDetailCheck = []
        this.treeDetailData = XEUtils.mapTree(this.treeDetailData, (item) => {
          if (item.status == '1') {
            this.treeDetailCheck.push(item.id + '@' + item.parentId + '@' + item.name + '@' + item.nodeType)
          }
          let disabledFlag = false
          if (item.optional == 0) {
            disabledFlag = true
          }
          return {
            ...item,
            key: item.id + '@' + item.parentId + '@' + item.name + '@' + item.nodeType,
            title: item.name,
            disabled: disabledFlag
          }
        })


        this.$store.commit('setTreeDetailData', this.treeDetailData)
        this.$store.commit('setTreeDetailCheck', this.treeDetailCheck)
        // console.log(this.treeDetailData);
        
        // console.log(this.treeDetailCheck);
        
        //  console.log();

        this.detailLoading = false
      })
    },
    //点击表格配置
    tableDetail(val) {
      // console.log(val);

      this.wbsName = val.wbsName
      this.wbsId = val.wbsId
      this.orgId = val.orgId
      this.projectId = val.projectId
      // console.log(this.wbsName);

      // this.$store.commit('setTreeDetailData', [])
      //    this.$store.commit('setTreeDetailCheck', [])

      this.visibleDrawer = true
      this.detailLoading = true
      this.getConfigData()
    },
    //获取施工列表
    getUnitList() {
      let data = {
        userId: this.$store.state.userInfo.id
      }
      this.defaultUnitFlag = false
      getManageByUserId(data).then((res) => {
        // console.log(res);
        if (res.data.length > 0) {
          this.unitList = res.data
          this.defaultUnit = []
          this.defaultUnit.push(this.unitList[0].id)
          this.defaultUnitFlag = true
          this.orgId = this.unitList[0].id
          this.getUnitTree()
        }
      })
    },

    //获取单位树
    getUnitTree() {
      this.treeLoading = true
      let data = {
        orgId: this.orgId
      }
      wbsTreeByOrgId(data).then((res) => {
        // console.log(res);
        if (res.data.length>0) {
          this.unitTreeData = XEUtils.mapTree(res.data, (item) => {
          let disabledFlag = false
          if (item.optional == 0) {
            disabledFlag = true
          }
          return {
            ...item,
            key: item.id,
            title: item.name,
            disabled: disabledFlag
          }
        })
        let firstId = XEUtils.findTree(this.unitTreeData, (item) => item.children === null).item.key
        this.defaultSelectKeysNoselect = []
        this.defaultSelectKeysNoselect.push(firstId)
        // console.log(this.defaultSelectKeysNoselect);

        this.parentWbsId = firstId
        this.getChildList()
        this.treeLoading = false
        }else{
          this.treeLoading = false
          this.loading = false
        }
        
      })
    },

    onClose() {
      this.visibleDrawer = false
    },
    async onSubmit() {
      let submitData = this.$refs.markingDetail.onSubmit()
      this.drawerClosable=false
      this.detailLoading=true
      markFinish(submitData).then((res) => {
        this.$message.destroy()
        this.$message.success(res.message)
        this.detailLoading=false
        this.drawerClosable=true
        this.getChildList()
      })
    },
    onCancle() {
      this.visibleDrawer = false
    },
    //改变单位时
    selectUnitChange(value) {
      // console.log(`selected ${value}`)
      this.orgId = value
      this.getUnitTree()
    }
  }
}
</script>

<style lang="less" scoped>
.rightTitle {
  font-size: 18px;
  margin-left: 15px;
  color: #202d40;
  font-weight: bold;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #f8f8f8;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}
.treeList ::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
.treeList ::-webkit-scrollbar-track {
  background: #f8f8f8;
  border-radius: 4px;
}
.treeList ::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}
.tableDiv {
  height: calc(100vh - 220px);
}
.selectDivBottom {
  background: #f7f9fc;
  height: 7px;
}
.leftDiv{
  height: calc(100vh - 165px);
}
::v-deep li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper span {
  color: #000000a6;
  cursor: pointer;
}
::v-deep li.ant-tree-treenode-disabled > span:not(.ant-tree-switcher),
li.ant-tree-treenode-disabled > .ant-tree-node-content-wrapper {
  cursor: pointer;
}
</style>
